refactor: migrate trpc to the new react query integration mode (#2438)

* refactor: migrate trpc to the new react query integration mode

* more fixes

* more migrations

* upgrade trpc client

2 files changed, 27 insertions, 16 deletions

diff --git a/apps/mobile/app/dashboard/lists/[slug]/edit.tsx b/apps/mobile/app/dashboard/lists/[slug]/edit.tsx
index 6ccc2f26..e0654722 100644
--- a/apps/mobile/app/dashboard/lists/[slug]/edit.tsx
+++ b/apps/mobile/app/dashboard/lists/[slug]/edit.tsx
@@ -7,7 +7,8 @@ import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Input } from "@/components/ui/Input";
 import { Text } from "@/components/ui/Text";
 import { useToast } from "@/components/ui/Toast";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useQuery } from "@tanstack/react-query";
 
 import { useEditBookmarkList } from "@karakeep/shared-react/hooks/lists";
 
@@ -16,6 +17,7 @@ const EditListPage = () => {
   const [text, setText] = useState("");
   const [query, setQuery] = useState("");
   const { toast } = useToast();
+  const api = useTRPC();
   const { mutate, isPending: editIsPending } = useEditBookmarkList({
     onSuccess: () => {
       dismiss();
@@ -41,9 +43,11 @@ const EditListPage = () => {
     throw new Error("Unexpected param type");
   }
 
-  const { data: list, isLoading: fetchIsPending } = api.lists.get.useQuery({
-    listId,
-  });
+  const { data: list, isLoading: fetchIsPending } = useQuery(
+    api.lists.get.queryOptions({
+      listId,
+    }),
+  );
 
   const dismiss = () => {
     router.back();
diff --git a/apps/mobile/app/dashboard/lists/[slug]/index.tsx b/apps/mobile/app/dashboard/lists/[slug]/index.tsx
index 11379588..97f797c6 100644
--- a/apps/mobile/app/dashboard/lists/[slug]/index.tsx
+++ b/apps/mobile/app/dashboard/lists/[slug]/index.tsx
@@ -5,14 +5,16 @@ import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { MenuView } from "@react-native-menu/menu";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { Ellipsis } from "lucide-react-native";
 
 import { ZBookmarkList } from "@karakeep/shared/types/lists";
 
 export default function ListView() {
   const { slug } = useLocalSearchParams();
+  const api = useTRPC();
   if (typeof slug !== "string") {
     throw new Error("Unexpected param type");
   }
@@ -20,7 +22,7 @@ export default function ListView() {
     data: list,
     error,
     refetch,
-  } = api.lists.get.useQuery({ listId: slug });
+  } = useQuery(api.lists.get.queryOptions({ listId: slug }));
 
   return (
     <CustomSafeAreaView>
@@ -58,17 +60,22 @@ function ListActionsMenu({
   listId: string;
   role: ZBookmarkList["userRole"];
 }) {
-  const { mutate: deleteList } = api.lists.delete.useMutation({
-    onSuccess: () => {
-      router.replace("/dashboard/lists");
-    },
-  });
+  const api = useTRPC();
+  const { mutate: deleteList } = useMutation(
+    api.lists.delete.mutationOptions({
+      onSuccess: () => {
+        router.replace("/dashboard/lists");
+      },
+    }),
+  );
 
-  const { mutate: leaveList } = api.lists.leaveList.useMutation({
-    onSuccess: () => {
-      router.replace("/dashboard/lists");
-    },
-  });
+  const { mutate: leaveList } = useMutation(
+    api.lists.leaveList.mutationOptions({
+      onSuccess: () => {
+        router.replace("/dashboard/lists");
+      },
+    }),
+  );
 
   const handleDelete = () => {
     Alert.alert("Delete List", "Are you sure you want to delete this list?", [